import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableOpacity, Image, FlatList, StatusBar, TextInput, ScrollView} from 'react-native';
import { base } from "../../../../assets/style";
import { getLocalTime } from "../../../../utils/utils";
import { reType } from "../../../../config";
import LinearGradient from "react-native-linear-gradient";
import { i18n } from "../../../../utils/locales/i18n";

type Props = {};
export default class MyAssets extends Component<Props> {
    static navigationOptions = ({ navigation }) => {
        return {
            title: 'FCC' + i18n.t('wd_scc'),
            headerStyle: {
                backgroundColor: '#ff7606',
                borderWidth: 0,
                borderColor: '#ff7606'
            },
            headerTintColor: '#fff',
            headerBackTitle: null
        }
    }
    constructor() {
        super();
        this.state = {
            orderData: ''
        }
    }
    componentWillMount(): void {
        this.setState({
            orderData: JSON.parse(this.props.navigation.getParam('detail'))
        })
    }

    // {"status":200,"code":10000,
    // "msg":"Submit user to pay the coin work order successfully",
    // "data":{
    // "Id":26,
    // "Uid":17,
    // "Token":"fcc",
    // "WithSum":21,
    // "Remark":"3421321",
    // "WithAddr":"0xb6201e25958ab1767aae1cd29abe5c4ce9b3c007",
    // "AddrDesc":"ewq",
    // "SerialNum":"1c982b8484eed83a",
    // "Fee":10,
    // "Sname":"",
    // "State":0,
    // "Confirm":0,
    // "TxHash":"",
    // "Created":1547029237}}

    render() {
        return (
                <View style={[base.flex_1, base.content_container, base.bg_orange, { paddingTop: 30, paddingBottom: 20 }]}>
                    <View style={[base.flex_1, { borderRadius: 5, padding: 20 }, base.bg_white]}>
                        <View style={{alignItems: 'center', paddingBottom: 20, borderBottomColor: '#eee', borderBottomWidth: 1}}>
                            <Image style={{width: 100, height: 100}} source={require('../../../../images/mine/success.png')}/>
                            <View style={{padding: 20}}><Text>{ i18n.t('info14') }</Text></View>
                        </View>
                        <View style={[ { paddingVertical: 20, paddingBottom: 30 }]}>
                            <View style={[base.flex_row_start, { paddingVertical: 10 }]}>
                                <View style={{width: 100}}>
                                    <Text>{ i18n.t('s_num') }：</Text>
                                </View>
                                <View>
                                    <Text style={[base.color_gray]}>{ this.state.orderData.SerialNum }</Text>
                                </View>
                            </View>
                            <View style={[base.flex_row_start, { paddingVertical: 10 }]}>
                                <View style={{width: 100}}>
                                    <Text>{i18n.t('amount')}：</Text>
                                </View>
                                <View>
                                    <Text style={[base.color_gray]}>{ this.state.orderData.WithSum } FCC</Text>
                                </View>
                            </View>
                            <View style={[base.flex_row_start, { paddingVertical: 10 }]}>
                                <View style={{width: 100}}>
                                    <Text>{i18n.t('fee')}：</Text>
                                </View>
                                <View>
                                    <Text style={[base.color_gray]}>{ this.state.orderData.Fee } FCC</Text>
                                </View>
                            </View>
                            <View style={[base.flex_row_start, { paddingVertical: 10 }]}>
                                <View style={{width: 100}}>
                                    <Text>{i18n.t('wd_addr')}：</Text>
                                </View>
                                <View style={{flex: 1}}>
                                    <Text style={[base.color_gray]}>
                                        { this.state.orderData.WithAddr }
                                    </Text>
                                </View>
                            </View>
                            <View style={[base.flex_row_start, { paddingVertical: 10}]}>
                                <View style={{width: 100}}>
                                    <Text>{i18n.t('creat_time')}：</Text>
                                </View>
                                <View>
                                    <Text style={[base.color_gray]}>
                                        { getLocalTime(this.state.orderData.Created) }
                                    </Text>
                                </View>
                            </View>
                            <View style={[base.flex_row_start, { paddingVertical: 10 }]}>
                                <View style={{width: 100}}>
                                    <Text style={{textAlign: 'justify'}}>{i18n.t('state')}：</Text>
                                </View>
                                <View>
                                    <Text style={[base.color_gray]}>{ reType[this.state.orderData.State] }</Text>
                                </View>
                            </View>
                        </View>
                        <View style={[base.flex_1, base.flex_col_center, { width: '100%'}]}>
                        <TouchableOpacity style={{width: '80%'}} onPress={() => this.props.navigation.navigate('MyAssets')}>
                        <LinearGradient
                        start={{x: 0, y: 0}}
                        end={{x: 1, y: 1}}
                        colors={['#feac1c', '#ff7506']}
                        style={{ width: '100%', height: 40, borderRadius: 25, justifyContent: 'center', alignItems: 'center' }}
                        >
                        <Text style={{color: '#fff'}}>{i18n.t('btw')}</Text>
                        </LinearGradient>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => this.props.navigation.navigate('Record')} style={{width: '80%', marginTop: 20}}>
                        <LinearGradient
                        start={{x: 0, y: 0}}
                        end={{x: 1, y: 1}}
                        colors={['#feac1c', '#ff7506']}
                        style={{ width: '100%', height: 40, borderRadius: 25, justifyContent: 'center', alignItems: 'center' }}
                        >
                        <Text style={{color: '#fff'}}>{i18n.t('c_rc')}</Text>
                        </LinearGradient>
                        </TouchableOpacity>
                        </View>
                    </View>
                </View>
        )
    }
}

const styles = StyleSheet.create({
});
